<template>
  <li>
    <div
      class="left"
      @mouseenter="showBofang"
      @mouseleave="closeBofang"
    >
      <img :src="qualityItem.picUrl" alt="#">
      <div class="playCount">
        <i class="iconfont iconbofang"></i>
        <span class="count">{{qualityItem.playCount}}</span>
      </div>
      <i v-show="showBofangTag" class="iconfont icon65zanting bottom-i"></i>
      <div class="tags"></div>
      <i class="iconfont iconjingpin top-i"></i>
    </div>
    <div class="right">
      <span class="gedan-name">{{qualityItem.name}}</span>
      <span class="creator">by {{qualityItem.nickname}}</span>
      <div class="box">
        <span v-if="cat === '全部歌单'" class="cat-tag">{{qualityItem.tag}}</span>
        <span class="gedan-desc">{{qualityItem.copywriter}}</span>
      </div>
    </div>
  </li>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  name: 'qualityItem',
  props: {
    qualityItem: {
      type: Object,
      default: () => {}
    },
    cat: {
      type: String,
      default: '全部歌单'
    }
  },
  setup () {
    const showBofangTag = ref<boolean>(false)
    const showBofang = () => {
      showBofangTag.value = true
    }
    const closeBofang = () => {
      showBofangTag.value = false
    }
    return {
      showBofangTag,
      showBofang,
      closeBofang
    }
  }
}
</script>

<style lang="scss" scoped>
li {
    flex: 0 0 48%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 12px;
    margin-bottom: 15px;

    .left {
      border-radius: 5px;
      position: relative;
      background-color: #e9e9e9;
      overflow: hidden;
      cursor: pointer;

      >img {
        width: 130px;
        height: 130px;
        border-radius: 5px;
      }

      .playCount {
        position: absolute;
        top: 4px;
        right: 5px;
        color: #f2f3f4;
      }

      .bottom-i {
        position: absolute;
        bottom: 8px;
        right: 8px;
        font-size: 26px;
        color: #f2f3f4;
      }

      .tags {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 35px solid #f3b068;
        border-right: 35px solid transparent;
      }

      .top-i {
        position: absolute;
        transform: rotateZ(-45deg);
        top: 3px;
        left: 3px;
      }
    }

    .right {
      flex: 1;
      box-sizing: border-box;
      padding-left: 10px;
      display: flex;
      flex-direction: column;

      .gedan-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 1.4;
        cursor: pointer;
        font-size: 14px;
        color: #353535;
        margin-bottom: 15px;
      }

      .creator {
        color: #cbcbcb;
        padding-bottom: 20px;
        cursor: pointer;
        line-height: 1.2;
      }

      .box {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;

        .cat-tag {
          border: 1px solid #ec4141;
          border-radius: 3px;
          color: #ec4141;
          padding: 1px 3px;
          margin-right: 5px;
        }

        .gedan-desc {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          line-height: 1.2;
          color: #d0d0d0;
        }
      }
    }
  }
</style>
